<template>
  <div class="container">
    <view class="photo_box">
      <view v-if="index==0" :aria-label="index" class="photo-item" v-for="(item,index) in photos" :key="index" :animation="item.animation" @touchstart="touchStart" @touchend="touchEnd"
            @touchmove="touchmove" :style="'z-index:'+(100-index)">
        <img  class="photo" mode="aspectFill" :src="item.src"/>
      </view>
    </view>
  </div>
</template>

<script>
  let animation = wx.createAnimation({
    duration: 100,
    delay: 0,
    timingFunction: "ease",
  });
  let startPoint = [0, 0];//起始坐标
  let distance = 0;
  let windowWidth = Math.abs(wx.getSystemInfoSync().windowWidth);
  export default {
    data() {
      return {
        viewIndex: 0,
        photos: [{src: "/static/images/test/1.png",animation:null},
                  {src: "/static/images/test/2.png",animation:null},
                  {src: "/static/images/test/3.png",animation:null}]
      }
    },
    computed: {},
    components: {},
    methods: {
      touchStart(e) {
        startPoint = [e.touches[0].pageX, e.touches[0].pageY];
      },
      touchmove(e) {
        var curPoint = [e.touches[0].pageX, e.touches[0].pageY];
        distance = curPoint[0] - startPoint[0];

        var scale = 1 - (Math.abs(distance) * 20) / (100 * windowWidth);
        animation.scale(scale, scale);
        animation.translateX(distance).step();

        this.photos[0].animation = animation.export();
      },
      touchEnd(e) {
        //移动距离超过屏幕一半则滑出
        if (Math.abs((distance / windowWidth)) > 0.5) {
          var current = wx.createAnimation({
            duration: 500,
            delay: 0,
            timingFunction: "ease",
          });
          var scale = 1 - (Math.abs((windowWidth)) * 20) / (100 * windowWidth);
          current.scale(scale, scale);
          if (distance > 0) {
            current.translateX(((windowWidth * 2)));
          } else {
            current.translateX((-(windowWidth * 2)));
          }
          this.photos[0].animation = current.export();
          var that = this;
          var timer = setInterval(function () {
            clearInterval(timer);
            that.photos[0].animation = null;
            that.photos.shift(that.photos[0])
            //that.imgs.push("cloud://meetion-dev.6d65-meetion-dev-1259154823/image/photo/oQGe15CoAB4R0Ooxpp3MHhfyOO0cFSD2K03J21jpg");
          }, 510)
        } else {
          var current = wx.createAnimation({
            duration: 500,
            delay: 0,
            timingFunction: "ease",
          });
          current.scale(1, 1);
          current.translateX(0).step();
          this.photos[0].animation = current.export();
        }
        //this.currentAnimation=null;
        startPoint = [0, 0];
        distance = 0;

      }
    },

    created() {
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #F7F7F7;
  }

  .photo_box {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 96%;
    height: 96%;
    overflow: hidden;
  }

  .photo {
    width: 100%;
    height: 100%;
    border-radius: 2vh;
    overflow: hidden;
    box-shadow: lightgray 0px 0px 10px;
  }

  .photo-item-active {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .photo-item {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
</style>
